<template>
	<div class="source">
		<pageHeader :active="4" :bgColor="'#292c4d'"></pageHeader>
		<div class="page-content">
			<div class="mt70 add-source">
				<div class="source-img">
					<div class="w30 pr" @mouseenter="show1 = true" @mouseleave="show1 = false">
						<img src="../../assets/images/demand1.png" alt="" width="100%">
						<div class="describe">数据需求</div>
						<div class="modal" v-show="show1">
							<div class="join-btn">
								<p class="cfff f16 mb10">马上发布数据需求，征集想要的数据</p>
								<!-- <el-button type="primary" size="small">立即发布</el-button> -->
							</div>
						</div>
					</div>
					<div class="w30 pr" @mouseenter="show2 = true" @mouseleave="show2 = false">
						<img src="../../assets/images/demand2.png" alt="" width="100%">
						<div class="describe">数据服务需求</div>
						<div class="modal" v-show="show2">
							<div class="join-btn">
								<p class="cfff f16 mb10">马上发布基于开放数据、业务需求的定制服务需求</p>
								<!-- <el-button type="primary" size="small">立即发布</el-button> -->
							</div>
						</div>
					</div>
					<div class="w30 pr" @mouseenter="show3 = true" @mouseleave="show3 = false">
						<img src="../../assets/images/demand3.png" alt="" width="100%">
						<div class="describe">应用需求</div>
						<div class="modal" v-show="show3">
							<div class="join-btn">
								<p class="cfff f16 mb10">马上发布完整业务系统或 App 的建设需求</p>
								<!-- <el-button type="primary" size="small">立即发布</el-button> -->
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="mt50">
				<p class="f26">需求响应</p>
				<p class="line"></p>
				<p class="f14 mt20 c999">需求响应：实现精准供需对接，及时响应您的需求</p>
			</div>
			<div class="content">
				<div class="item pt20" v-for="(item, index) in list" :key="index">
					<div class="flex">
						<div class="label-box">[ 标题 ]</div>
						<div class="title">{{ item.title }}</div>
					</div>
					
					<div class="flex">
						<div class="label-box">[ 内容 ]</div>
						<div class="remark">
							<div>{{ item.content }}</div>
							<div class='bottom-box'>
								<span>发布人:{{item.name}}</span>
								<span>发布时间:{{item.createTime}}</span>
							</div>
						</div>
					</div>
					
					<div class="flex">
						<div class="label-box" style="color: #40a381;">[ 回复 ]</div>
						<div class="title">您好，感谢您的留言，目前已将您的需求反馈至数源部门，建议您持续关注，谢谢!</div>
					</div>
				</div>
			</div>
		</div>
		<pageFooter></pageFooter>
	</div>
</template>

<script>
	import pageHeader from '@/components/pageHeader.vue'
	import pageFooter from '@/components/pageFooter.vue'
    import {
    	getPwDemandApply,
    } from '@/api/openPlatform' //api接口
    
	export default {
		name: 'Demand',
		data() {
			return {
				list: [],
				show1: false,
				show2: false,
				show3: false,
			}
		},
		components: {
			pageHeader,
			pageFooter
		},
		created() {
			this.getList()
		},
		methods: {
			//获取列表数据
			getList() {
				getPwDemandApply({}).then((response) => {
					console.log(response)
					if (response.code == 0) {
						this.list = response.data
					}
				})
			},
			
			
		}
	}
</script>

<style lang="scss" scoped>
	.source {
		margin-top: 70px;

		.page-content {
			min-height: calc(100vh - 300px);
		}

		.add-source {
			background: url('../../assets/images/recourse.png') no-repeat;
			padding-top: 50px;
			background-size: 100% 300px;
			height: 200px;
			overflow: hidden;
			min-width: 1200px;

			.source-img {
				width: 1200px;
				margin: 0 auto;
				padding: 15px;
				background: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.describe {
					position: absolute;
					top: 150px;
					right: 20px;
					font-size: 18px;
					color: #fff;
				}

				.modal {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					right: 0;
					background: rgba(51, 51, 51, .7);
				}

				.join-btn {
					position: absolute;
					top: 60%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.w30 {
					width: 32%;
				}
			}
		}

		.line {
			width: 30px;
			height: 2px;
			background: #0a6cff;
			margin: 20px auto;
		}

		.content {
			// background: rgb(242, 247, 251);
			padding: 15px 0;
			width: 1200px;
			margin: 50px auto;

			.item {
				text-align: left;
				padding: 0 20px;
				border-bottom: 1px dotted #d6e1f2;
				.label-box {
					width: 60px;
					// float:left;
					
					font-size: 14px;
					color: #3d81c8;
					font-weight: 600;
				}

				.title {
					flex: 1;
					display: inline-block;
					font-size: 14px;
					margin-bottom: 10px;
				}

				.remark {
					font-size: 14px;
					margin-bottom: 15px;
					flex: 1;
					
					.bottom-box{
						margin-top: 5px;
						font-size: 13px;
						span{
							margin-right: 10px;
							color: #cccccc;
						}
					}
				}

				.bb1 {
					border-bottom: 1px dotted #d6e1f2;
				}

				// &:hover {
				//   color: #0a6cff !important;
				//   border: 1px solid #0a6cff;
				//   background: #fff;
				// }
			}
		}
	}
</style>